<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{if !empty($system.web_site_title)}{$system.web_site_title}{/if}</title>
    <link rel="icon" href="{if !empty($system.web_site_logo)}{$system.web_site_logo}{/if}">
    <link rel="stylesheet" href="/static/res/layui/css/layui.css">
    <link rel="stylesheet" href="/static/raffle/css/raffle.css"/>
    <style>
        .raffle-num {
            margin-top: -5.6rem;
            text-align: center;
            color: #fff;
        }
    </style>
</head>
<body>
<img src="/static/raffle/img/lottery-top.png" alt="title-top" class="top-bg">
<img src="/static/raffle/img/lottery-title.png" alt="title" class="title">
<div class="raffle-num">每次抽奖消耗：<span class="raffle-num-span">{$system.raffle_amount}元</span></div>
<div class="lottery-wrapper">
    <img src="/static/raffle/img/lottery.png" alt="bg" class="bg">
    <ul class="lottery-wrapper-main">
        {foreach name="prize" item="vo" key="key"}
        <li class="item">
            <img src="{$vo.icon}" alt="product" class="product-pic">
            <p class="name">{$vo.title}</p>
        </li>
        {if $key == 4}
        <li class="item">点击<br>抽奖</li>
        {/if}
        {/foreach}
    </ul>
</div>
<div class="button" onclick="load_href('{:url(\'raffle/record\')}',2)">查看抽奖记录</div>
<div class="overlay" style="display: none;">
    <div class="result-content-wrapper">
        <p class="subtitle" id="raffle-msg">恭喜获得</p>
        <img src="/static/raffle/img/lottery-top.png" alt="product" class="product-pic" id="raffle-img">
        <p class="name" id="raffle-title">奖品</p>
        <div class="finish">确定</div>
    </div>
</div>
{include file="public/menu" select="5" /}
</body>
<script src="/static/index/js/jquery.js"></script>
<script src="/static/res/layui/layui.js"></script>
<script src="/static/index/js/common.js"></script>
<script src="/static/raffle/js/adapt.js"></script>
<script>
    $(function () {
        const ulDom = document.querySelector('.lottery-wrapper-main');
        const itemsDom = document.querySelectorAll('.lottery-wrapper-main > .item');
        const step = [1, 2, 3, 6, 9, 8, 7, 4];
        itemsDom[4].onclick = () => {
            var load = layer.load(2);
            $.ajax({
                type: 'POST',
                url: '{:url("raffle/submit")}',
                dataType: "json",
                success: function (data) {
                    layer.close(load);
                    if (data.code === 1) {
                        action(data.msg, data.data);
                    } else {
                        layer.msg(data.msg);
                    }
                }
            });
        }
        function lotterying(count, cb) {
            for (let i = 1; i <= count; i++) {
                setTimeout(() => {
                    const cur = step[i % step.length]
                    itemsDom.forEach((ele, index) => {
                        if (index === cur - 1) {
                            ele.classList.add('active')
                        } else {
                            ele.classList.remove('active')
                        }
                    })
                    if (i === count) cb()
                }, calculateTime(i, count))
            }
        }
        function calculateTime(index, total) {
            return index * 40;
        }
        function action(msg, data) {
            ulDom.classList.add('lottery-progress');
            const stepCount = 6 * step.length + data.position;
            lotterying(stepCount, () => {
                setTimeout(() => {
                    ulDom.classList.remove('lottery-progress');
                    $('#raffle-msg').text(msg);
                    $('#raffle-img').attr('src', data.icon);
                    $('#raffle-title').text(data.title);
                    $('.overlay').show();
                }, 1000)
            })
        }
        $('.finish').click(function () {
            $('.overlay').hide();
        });
    });
</script>
</html>